import { RcUpload } from '@/components/upload/RcUpload'
import { useAuth } from '@/hooks/useAuth'
import { useUpdateUserMutation } from '@/services/user'
import { AxiosError } from 'axios'
import { toast } from 'sonner'

export const Avatar = () => {
  const { user, getAllFields } = useAuth()
  const updateUserMutation = useUpdateUserMutation()
  return (
    <main>
      <div className="w-52 rounded-lg overflow-hidden">
        <RcUpload
          action="/user/upload/avatar"
          onSuccess={(data) => {
            updateUserMutation.mutate({ ...getAllFields(), avatar: data.url })
          }}
          onError={(error: AxiosError) => {
            toast(error.message)
          }}
          accept=".png,.jpg,.jpeg">
          <img src={user('avatar')} className="w-52" />
        </RcUpload>
        <div className="text-center text-muted-foreground text-xs mt-2">请点击图片上传图像</div>
      </div>
    </main>
  )
}
